<template>
	<div class="all">
		<div class="left" v-if="shouma">
			<left @shouqilai="shou"></left>
		</div>
		<div class="left2" @click="shou" v-if="!shouma">开</div>
		<div class="right" ref="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content">
				<div class="flexb">
					<div class="flex">
						<el-input v-model="search.username" style="width: 150px; margin-right: 10px;" placeholder="用户名"></el-input>
						<el-input v-model="search.phone" style="width: 150px; margin-right: 10px;" placeholder="手机号"></el-input>
						<el-button type="warning" @click="searchs">搜索</el-button>
					</div>
					<div class="flex">
						<el-upload class="upload-demo" ref="upload" style="margin-right: 10px;" :show-file-list="false"
							action="https://jsonplaceholder.typicode.com/posts/"  :limit='1'
							:on-change="shangchuan2" :auto-upload="false">
							<el-button slot="trigger" type="warning">导入批量清余额</el-button>
						</el-upload>
						
						<el-button type="text" @click="xiazai">下载导入模板</el-button>
						<el-button type="warning" @click="go('/yonghu/yonghuyue')">查看修改记录</el-button>
					</div>
					
				</div>

				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column label="用户名">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.realname }}</span>
							</template>
						</el-table-column>
						<el-table-column label="手机号">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.phone }}</span>
							</template>
						</el-table-column>
						<el-table-column label="账户余额">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.money }}</span>
							</template>
						</el-table-column>
						<el-table-column label="订单">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.orderId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="创建时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
							</template>
						</el-table-column>

						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text"  @click="jiebang(scope.row.id)">解除微信绑定</el-button>
								<el-button type="text" @click="getjilu(scope.row.id)">查看缴费记录</el-button>
								<el-button type="text" v-if="userIdentity != 2" @click="xiugai(scope.row)">修改账号信息</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="修改账号信息" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1">账号名称:</div>
				<div class="f2">
					<el-input v-model="xiugaicon.username" style="width: 400px;" placeholder="账号名称"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">手机号码:</div>
				<div class="f2">
					<el-input v-model="xiugaicon.phone" style="width: 400px;" placeholder="手机号码"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">账号余额:</div>
				<div class="f2">
					<el-input v-model="xiugaicon.money" style="width: 400px;" placeholder="账号余额"><template slot="append">元</template></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">备注信息:</div>
				<div class="f2">
					<el-input v-model="xiugaicon.comment" style="width: 400px;" placeholder="备注信息"></el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tianjia">确 定</el-button>
			</span>
		</el-dialog>
		<el-dialog title="查看缴费记录" :visible.sync="log2" :close-on-click-modal="false" width="1000px">
			<el-table :data="tableData2" border style="width: 100%">
				<el-table-column label="缴费时间">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="缴费数额">
					<template slot-scope="scope">
						<span style="margin-left: 10px">{{ scope.row.price }}</span>
					</template>
				</el-table-column>

				<el-table-column label="状态">
					<template slot-scope="scope">
						<span style="margin-left: 10px" v-if="scope.row.status == 0">未支付</span>
						<span style="margin-left: 10px" v-if="scope.row.status == 1">支付成功</span>
					</template>
				</el-table-column>
				<el-table-column label="缴费方式">
					<template slot-scope="scope">
						<span style="margin-left: 10px" v-if="scope.row.payWay == 1">微信</span>
						<span style="margin-left: 10px" v-if="scope.row.payWay == 2">活动赠送</span>
						<span style="margin-left: 10px" v-if="scope.row.payWay == 3">系统退款</span>
					</template>
				</el-table-column>
			</el-table>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="log2 = false">知道了</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	export default {
		name: 'yonghu',
		components: {
			left,
			top
		},
		data() {
			return {
				search: {
					phone: "",
					username:""
				},
				log: false,
				log2: false,
				page: 1,
				page_size: 20,
				total: 0,
				loading: true,
				tableData: [],
				tableData2:[],
				xiugaicon: {
					id: "",
					username: "",
					money: "",
					phone: "",
					comment:""
				},
				userIdentity:0,
				fileList:[],
				shouma:true
			}
		},
		created() {
			this.getlist()
			this.userIdentity = JSON.parse(localStorage.getItem('person')).userIdentity
		},
		methods: {
			shou:function(){
				this.shouma = !this.shouma
				this.$refs.right.style.width = "100%"
			},
			xiazai: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', this.url + '/old_work/IotFunction/getEecelDemo1');
				a.click();
			},
			shangchuan2: function(file) {
				this.loading = true
				let url = this.url + `/old_work/IotFunction/importExcel3`
				var formData = new FormData();
				formData.append("file", file.raw)
				this.axios.post(url, formData)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success("上传成功");
							this.getlist()
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			
			go:function(url,id){
			  this.$router.push({
			    path:url,
			    query:{
			      id:id
			    }
			  })
			},
			xiugai: function(item) {
				this.xiugaicon = {
					id: item.id,
					username: item.username,
					money: item.money,
					phone: item.phone,
					comment:item.comment
				}
				this.log = true
			},
			
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			searchs:function(){
				this.loading = true
				this.page = 1
				this.getlist()
			},
			//获取列表
			getlist: function() {
				this.axios.get(this.url+`/work/userManager/list?pageNo=${this.page}&pageSize=${this.page_size}&username=${this.search.username}&phone=${this.search.phone}`)
					.then(response => {
						console.log(response)
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
							this.loading = false
						} else {
							this.$message.error(response.data.message);
						}
					})
					.catch(response => {
						if (response.response.status == 401) {
							this.$router.push({
								path: '/login'
							})
						}
					});
			},
			//获取用户缴费记录
			getjilu: function(id) {
				this.axios.get(this.url+`/work/userManager/findPayRecord?id=`+id)
					.then(response => {
						if (response.data.success == true) {
							this.tableData2 = response.data.result
							this.log2 = true
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			jiebang:function(id){
				this.$confirm('是否真的解绑用户?', '确认提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.url+`/work/userManager/unbandWechat?user_id=`+id)
						.then(response => {
							if (response.data.success == true) {
								this.$message.success("解绑成功");
								this.getlist()
							} else {
								this.$message.error(response.data.message);
							}
						})
				})
				
				
			},
			//修改用户信息
			tianjia: function() {
				this.axios.post(this.url+`/work/userManager/edit?id=${this.xiugaicon.id}&username=${this.xiugaicon.username}&phone=${this.xiugaicon.phone}`)
					.then(response => {
						if (response.data.success == true) {
							this.xiugaiyue()
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			//修改余额
			xiugaiyue:function(){
				this.axios.post(this.url+`/work/userManager/editMoney?id=${this.xiugaicon.id}&money=${this.xiugaicon.money}&comment=${this.xiugaicon.comment}`)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success("修改账号信息成功");
							this.xiugaicon = {
								id: "",
								username: "",
								money: "",
								phone: ""
							}
							this.getlist()
							this.log = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;
		.top{
			background: #fff;
		}
		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
